<div class="childbox">
  <!-- <h2>child test now</h2>
  <button (click)="vote()">button</button>
  <img src="./assets/static/aa.png" class="img1">
  <p [appHighlight]="color">hightlight text test</p>
  <h2>{{birthday | date:"MM/dd/yy"}}</h2>
  <div>
    <span *ngFor="let item of testarr">{{item | flying}} ,</span>
  </div> -->
  <div [@openClose]="isopen?'open' : 'closed'" class="open-close-container">
    <p>the box is now {{isopen? "open": "closed"}}</p>
    <button (click)="toggle()">toggle</button>
  </div>
  <div class="formbox">
    <input type="text" [formControl]="formName">
    <p>value: {{formName.value}}</p>
    <button (click)="upformdata()">up input data</button>
    <p>==========</p>
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  
      <label>
        First Name:
        <input type="text" formControlName="firstName">
      </label>
    
      <label>
        Last Name:
        <input type="text" formControlName="lastName">
      </label>
      <button type="submit" [disabled]="!profileForm.valid">Submit</button>
    </form>
  </div>
  <!-- <p>{{name}}</p> -->
  <div>
    <input id="xbname" name="xbname" 
       required minlength="5" appForbiddenName="bob"
       [(ngModel)]="xbname" #xbnames="ngModel"
    >
    <div *ngIf="xbnames.invalid && (xbnames.dirty || xbnames.touched)">
        <div *ngIf="xbnames.errors.required">
            Name is required
        </div>
        <div *ngIf="xbnames.errors.minlength">
          Name must be at least 4 characters long.
        </div>
        <div *ngIf="xbnames.errors.forbiddenName">
          Name cannot be Bob.
        </div>
    </div>
  </div>
</div>
<el-button type="primary">主要按钮</el-button>
<el-slider (modelChange)="handle($event)">
</el-slider>
<el-alert type="success">
  成功提示的文案
</el-alert>